<template>
  <div>
    <div class="header">
      <mt-navbar class="home-nav" v-model='active'>
        <mt-tab-item class='nav-title' id='activity'>专题活动</mt-tab-item>
        <mt-tab-item class='nav-title' id='club'>书友圈</mt-tab-item>
      </mt-navbar>
      <router-link class="bianji" to='addbooks'>
        <img src="../../../static/schoolroom/club/bianji.png" alt="" width="30px" height="30px" />
      </router-link>
    </div>
    <mt-tab-container v-model="active" swipeable>
      <mt-tab-container-item id="activity">
        <activity></activity>
      </mt-tab-container-item>
      <mt-tab-container-item id="club">
        <club></club>
      </mt-tab-container-item>
    </mt-tab-container>
    <tabbar v-show="true"></tabbar>
  </div>
</template>

<script>
import tabbar from "./../subcom/tabbar.vue";
import activity from "./discoverlist/activity.vue";
import club from "./discoverlist/club.vue";

export default {
  components: {
    tabbar,
    activity,
    club
  },
  watch:{
    active(curVal,oldVal){
        localStorage.setItem("discover_active",curVal)
    }
  },
  created(){
    this.active = localStorage.getItem("discover_active")||"club";
  },
  data() {
    return {
      active: "club"
    };
  }
};
</script>

<style scoped>
a {
  color: #ffffff;
}
.mint-navbar .mint-tab-item{
      margin: 0 50px;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #ffffff;
  color: #f1f1f1;
  margin-bottom: 3px;
}
.header {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 99;
  width: 100%;
}
.bianji {
  position: absolute;
  right: 15px;
  top: 10px;
}
.home-nav {
  background: #e60012;
  color: #8bf3b0;
}
</style>